<template>
    <div>
        <div class="single-goods" v-for="item in list" :key="item.id">
            <div class="top">
                <i class="iconfont icon-gouxuan"></i>
                <img :src='item.imgUrl' alt="">
                <div class="top-right">
                    <p>{{ item.name }}</p>
                    <div class="color">{{ item.color }} <i class="iconfont icon-xiajiantou"></i></div>
                    <div class="price">
                        <div class="price-content">
                            <span>{{ item.nowPrice | newPrice }}</span>
                            <span v-if="item.oldPrice!=''">{{ item.oldPrice | newPrice }}</span>    
                        </div>
                        <div class="count">
                            <span>-</span>
                            <div>{{ item.count }}</div>
                            <span>+</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swap" v-if="item.swapList.length>0">
                <!-- {{ item.swapList }} -->
                <div class="swap-line" v-for="item in item.swapList" :key="item.index">
                    <span>{{ item.sort }}</span>
                    <span>{{ item.description }}</span>
                    <span>{{ item.price | newPrice }}</span>
                    <span>(已省{{ item.lower | newPrice }})</span>
                    <span>选购 ></span>
                </div>
            </div>
            <div class="gift" v-if="item.giftList.length>0">
                <div class="gift-line" v-for="item in item.giftList" :key="item.index">
                    <img :src="item.imgUrl" alt="">
                    <div>{{ item.text }}</div>
                    <p>{{ item.name }}</p>
                    <span>换赠品 ></span>
                </div>
            </div>
            <div class="serve" v-if="Object.keys(item.serve).length>0">
                <span>{{ item.serve.text }}</span>
                <span>{{ item.serve.description }}</span>
                <span>选购 ></span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            list: [
                {
                    id: 1,
                    name: '米家互联网洗烘一体机10kg',
                    color: '白色',
                    imgUrl: require("./../../../assets/cart-img/pms_1545975724.92496169.jpg"),
                    nowPrice: 1999,
                    oldPrice: 2299,
                    count: 1,
                    swapList: [
                        {
                            index: 1,
                            sort: "换购",
                            description: "加599元得小米蓝牙...",
                            price: 599,
                            lower: '100'
                        },
                        {
                            index: 2,
                            sort: "换购",
                            description: "加299元得小米真无...",
                            price: 299,
                            lower: '100'
                        },
                        {
                            index: 3,
                            sort: "换购",
                            description: "加139元得耳机Air2 SE",
                            price: 139,
                            lower: '30'
                        }
                    ],
                    giftList: [],
                    serve: {} 
                },
                {
                    id: 2,
                    name: '小米真无线蓝牙耳机Air2 SE',
                    color: '白色',
                    imgUrl: require("./../../../assets/cart-img/pms_1589439786.76992727.jpg"),
                    nowPrice: 169,
                    oldPrice: '',
                    count: 1,
                    swapList: [],
                    giftList: [],
                    serve: {} 
                },
                {
                    id: 3,
                    name: 'MIX FOLD 折叠屏手机',
                    color: '12GB+512GB 黑色',
                    imgUrl: require("./../../../assets/cart-img/pms_1617098700.31877799.jpg"),
                    nowPrice: 10999,
                    oldPrice: '',
                    count: 1,
                    swapList: [],
                    giftList: [
                        {
                            index: 1,
                            text: '赠品',
                            imgUrl: require("./../../../assets/cart-img/pms_1617016261.62734340.jpg"),
                            name: '小米环保袋 橘色 x1'
                        },
                        {
                            index: 2,
                            text: '赠品',
                            imgUrl: require("./../../../assets/cart-img/pms_1617097752.22418929.jpg"),
                            name: 'MIX FOLD 芳纶纤维保护壳 黑色 x1'
                        }
                    ],
                    serve: {
                        text: '服务',
                        description: '意外保护 | 云空间服务'
                    } 
                }
            ]
        }
    },
    filters: {
        newPrice(val){
            return '￥' + val;
        }
    }
}
</script>

<style scoped lang="scss">
.single-goods{
    width: 380px;
    height: auto;
    margin: auto;
    padding: 8px;
    margin-top: 10px;
    background-color: white;
    border-radius: 5px;
    .top{
        width: 380px;
        height: auto;
        display: flex;
        >i{
            line-height: 100px;
            color: orangered;
        }
        >img{
            width: 100px;
            height: 100px;
        }
        .top-right{
            width: 245px;
            height: 100px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .color{
                width: 50px;
                padding: 0 5px;
                height: auto;
                font-size: 12px;
                line-height: 22px;
                margin-top: -20px;
                background-color: #F9F9F9;
                border-radius: 5px;
                i{
                    font-size: 12px;
                }
            }
            .price{
                display: flex;
                justify-content: space-between;
                .price-content{
                    >span{
                        &:nth-of-type(1){
                            font-size: 20px;
                            color: orangered;
                        }
                        &:nth-of-type(2){
                            font-size: 12px;
                            color: gray;
                            text-decoration: line-through;
                            margin-top: 8px;
                        }
                    }
                }
                .count{
                    margin-left: 20px;
                    margin-top: 8px;
                    display: flex;
                    div{
                        padding: 0 22px;
                        background-color: #F9F9F9;
                        border-radius: 5px;
                    }
                    span{
                        padding: 0 12px;
                        &:nth-of-type(1){
                            color: gray;
                        }
                    }
                }
            }
        }
    }
    .swap{
        .swap-line{
            font-size: 13px;
            margin-top: 10px;
            line-height: 20px;
            span{
                &:nth-of-type(1){
                    margin-left: 40px;
                    font-weight: 900;
                }
                &:nth-of-type(2){
                    margin-left: 10px;
                }
                &:nth-of-type(4){
                    color: orangered;
                }
                &:nth-of-type(5){
                    margin-left: 20px;
                    color: #898989;
                }
            }
        }
    }
    .gift{
        .gift-line{
            margin-top: 5px;
            padding: 5px 0;
            // line-height: 50px;
            font-size: 13px;
            display: flex;
            align-items: center;
            img{
                width: 50px;
                height: 50px;
                margin-left: 40px;
            }
            div{
                margin-left: 10px;
                color: red;
                border: 1px solid red;
                border-radius: 3px;
            }
            p{
                margin-left: 10px;
            }
            span{
                margin-left: 60px;
            }
            &:nth-of-type(2){
                span{
                    display: none;
                }
            }
        }
    }
    .serve{
        margin-top: 10px;
        margin-bottom: 10px;
        span{
            &:nth-of-type(1){
                font-size: 14px;
                color: #B5814C;
                margin-left: 40px;
            }
            &:nth-of-type(2){
                font-size: 13px;
                margin-left: 15px;
            }
            &:nth-of-type(3){
                font-size: 13px;
                margin-left: 110px;
            }
        }
    }
    &:nth-of-type(3) .top .color{
        width: 130px;
    }
}
</style>